<template>
	<div class="app-container">
		<!-- 高级查询 -->
		<div class="filter_container">
			<el-tabs v-model="queryParams.locationType" type="card" @tab-click="handleQuery">
				<el-tab-pane v-for="item in tableData">
					<span slot="label"><i class="el-icon-s-order" />{{item.warehouserName}}</span>
					<el-button style="float:right;margin-right:10px;" type="warning">导出</el-button>
				</el-tab-pane>
				<!-- <el-tab-pane name="普通物品区">
					<span slot="label"><i class="el-icon-bank-card" />普通物品区</span>
				</el-tab-pane>
				<el-tab-pane name="贵重物品区">
					<span slot="label"><i class="el-icon-bank-card" />贵重物品区</span>
				</el-tab-pane>
				<el-tab-pane name="重型物品区">
					<span slot="label"><i class="el-icon-bank-card" />重型物品区</span>
				</el-tab-pane>
				<el-tab-pane name="超规物品区">
					<span slot="label"><i class="el-icon-bank-card" />超规物品区</span>
				</el-tab-pane> -->
			</el-tabs>
		</div>
		<el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
			<!-- <el-form-item label=":">
        <el-input v-model="queryParams.warehouseCode" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
 -->
			   <!-- <el-form-item label="库位号">
        <el-input v-model="queryParams.locationNo" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
		<!-- 	<el-form-item label="区">
				<el-input v-model="queryParams.areaAndRow" size="small" placeholder="请输入" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item> -->
			<!--  <el-form-item label="区排:">
        <el-input v-model="queryParams.areaAndRow" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="区排节:">
         <el-input v-model="queryParams.areaRowTier" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="层格:">
          <el-input v-model="queryParams.tierBin" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
      <el-form-item label="节:">
        <el-input v-model="queryParams.bay" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
			<!-- <el-form-item label="节">
				<el-input v-model="queryParams.bay" size="small" placeholder="请输入" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="层">
				<el-input v-model="queryParams.tier" size="small" placeholder="请输入" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="格">
				<el-input v-model="queryParams.bin" size="small" placeholder="请输入" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>

			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				<el-button v-hasPermission="['web:tbWmsLocation:insert']" type="info" icon="el-icon-upload2" size="mini"
					@click="openUploadDialog">批量导入库位</el-button>
			</el-form-item> -->
		</el-form>

		<!-- 工具栏 -->


		<!-- 数据列表 -->
		<div class="container" style="display:flex;">
			<el-card class="box-card" style="width:55%;margin: 10px 10px">
				<div slot="header" class="clearfix">
					<span>{{queryParams.locationType}}</span>

				</div>

				<el-row :gutter="20">
					<el-col style="margin-top: 20px"  v-for="item in page.records" :span="6">
						<div @click="getTableData(item.warehouseId)">
							<el-card class="box-card3" shadow="hover">
								<!-- <div slot="header" style="text-align: center;" class="clearfix">
									<span>{{item.areaAndRow}}排-{{item.bay}}节-{{item.tier}}层-{{item.bin}}格</span>
								</div> -->
								<div slot="header" style="text-align: center;" class="clearfix">
									<span>{{item.areaName}}</span>
								</div>

								<!-- <div class="fontSize">已装：{{item.currentLoad}}KG</div>
								<div class="fontSize">限重：{{item.maxLoad}}KG</div> -->
								<el-progress :color="customColors" class="progress" :percentage="percentage">
								</el-progress>

							</el-card>
						</div>
					</el-col>
				</el-row>
				<pagination v-show="page.total>0" :total="page.total" :page.sync="page.current"
					:limit.sync="page.pageSize" @pagination="handleQuery" />

			</el-card>
			<el-card class="box-card1" style="width:45%;margin: 10px 10px">
				<div slot="header" class="clearfix">
					<span style="margin: 0 auto;">{{clearlyTitle}}--库存详情</span>
				</div>
				<!-- <el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleProcessCheck">盘点
						</el-button>
					</el-col>
				</el-row> -->
				<el-table :data="page1.records" height="80vh" border stripe style="width: 100%">
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column label="序号" align="center" type="index" />

          <el-table-column prop="unitName" align="center" label="部门">
          </el-table-column>
					<el-table-column prop="materialName" align="center" label="物品名称">
          </el-table-column>
					<el-table-column prop="materialNo" align="center" label="物品图号">
					</el-table-column>
          <el-table-column prop="quantity" align="center" label="数量">
          </el-table-column>
          <el-table-column prop="" align="center" label="厂家代码">
          </el-table-column>
          <el-table-column prop="" align="center" label="备注">
          </el-table-column>
					<!--  <el-table-column prop="rfid" label="标签号">
        </el-table-column> -->
					<!-- <el-table-column align="center" prop="rfid" label="RFID标签">
						<template slot-scope="scope">
							<el-input v-model="scope.row.rfid" size="small" placeholder="标签号" clearable />
						</template>
					</el-table-column> -->
					<!-- <el-table-column prop="caseNo" align="center" label="业务编号">
					</el-table-column>
					<el-table-column prop="caseName" align="center" label="业务名称">
					</el-table-column> -->


					<!-- <el-table-column prop="count" label="盘点数量">
							<template slot-scope="scope">
								<el-input v-model="scope.row.count" size="small" placeholder="盘点数量" clearable />
							</template>
						</el-table-column> -->
				</el-table>

        <pagination v-show="page1.total>0" :total="page1.total" :page.sync="page1.current"
        	:limit.sync="page1.pageSize" @pagination="getTableData" />
			</el-card>
		</div>

		<!-- 分页 -->
		<!-- <el-dialog style="width:70%" :title="uploadDialog.title" :visible.sync="uploadDialog.visible" append-to-body>
			<div v-loading="uploadLoading">
				<el-upload ref="upload" :limit="1" :headers="uploadData.headers"
					:action="uploadData.url + '?updateSupport=' + uploadData.updateSupport" :data="uploadData.params"
					:disabled="uploadData.isUploading" :on-progress="handleFileUploadProgress"
					:on-success="handleFileSuccess" :on-error="handleFileError" :auto-upload="false"
					accept=".xlsx, .xls" drag>
					<i class="el-icon-upload" />
					<div class="el-upload__text">
						将文件拖到此处，或
						<em>点击上传</em>
					</div>
					<div slot="tip" class="el-upload__tip">
						<el-select v-model="uploadData.params.warehouseCode" style="width: 100%" filterable clearable
							placeholder="请选择库区">
							<el-option v-for="option in options.warehouses" :key="option.id"
								:label="option.warehouseName" :value="option.id" />
						</el-select>
					</div>

					<div slot="tip" class="el-upload__tip" style="color:red;margin: 10px 0;">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
				</el-upload>
				<div slot="footer" style="text-align: center;" class="dialog-footer">
					<el-button type="primary" @click="confirmUploadDialog">确 定</el-button>
					<el-button @click="resetUploadDialog">取 消</el-button>
				</div>
			</div>
		</el-dialog> -->

	</div>
</template>

<script>
import appConstant from '@/constant/AppConstant'
import WarehouseApi from '@/api/basic/WarehouseApi'
import TbWmsLocationApi from '@/api/web/TbWmsLocationApi'
import TbWmsMaterialInLocationApi from '@/api/web/TbWmsMaterialInLocationApi'
import WarehouseAreaApi from '@/api/web/WarehouseAreaApi'
import TbUserWarehouseManagerMapApi from '@/api/basic/TbUserWarehouseManagerMapApi'
import BaseInfoMixin from '@/mixins/BaseInfo'
import UserApi from '@/api/system/UserApi'

const defaultWarehouseAreaFormData = {
  warehouseCode: null,
  warehouseId: null,
  descNo: null,
  areaCode: null,
  areaName: null
}
const defaultLocationFormData = {
  areaCode: null,
  locationNo: null,
  locationName: null,
  area: null
}
export default {
  components: {

  },
  mixins: [BaseInfoMixin],
  filters: {
    warehouseTypeFilter(item) {
      const values = appConstant.genWarehouseTypeOptions.filter(value => value.key === item)
      if (values && values.length > 0) {
        return values[0].label
      } else {
        return ''
      }
    }
   },
  data() {
    return {
      activeName: '1',
      clearlyTitle: '',
      selects: {},
      options: {
        userSelect: null
      },
      operation: undefined,
      percentage: 23.9,
      customColors: [{
      		color: '#1989fa',
      		percentage: 55
      	},
      	{
      		color: '#e6a23c',
      		percentage: 60
      	},
      	{
      		color: '#e6a23c',
      		percentage: 79
      	},
      	{
      		color: '#f56c6c',
      		percentage: 80
      	},
      	{
      		color: '#f56c6c',
      		percentage: 100
      	}
      ],
      data: {
        isValid: appConstant.Y
      },
      queryParams: {
        warehouserCode: null,
        warehouseId: null,
        warehouseType: null,
        isValid: this.$constant.Y
      },
      queryParams1: {
        warehouseCode: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      page1: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      warehouseAreaFormDialog: {
        title: '',
        visible: false
      },
      TbUserWarehouseManagerMapDialog: {
        title: '',
        visible: false
      },
      TbUserWarehouseManagerMapFormData: {
        warehouseId: null,
        userId: null
      },
      TbUserWarehouseManagerMapFormRules: {},
      warehouseAreaFormData: Object.assign({}, defaultWarehouseAreaFormData),
      warehouseAreaFormRules: {},
      locationFormDialog: {
        title: '',
        visible: false
      },
      locationFormData:  Object.assign({}, defaultLocationFormData),
      locationFormRules: {},
      locationListDialog: {
        title: '库位列表',
        visible: false
      },
      loading: false,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true,
      tableData: []
    }
  },
  created() {
    this.initForm()
    this.loadSelects()
    this.handleQuery()
  },
  methods: {
    initForm() {
    },
    loadSelects() {
    },
    handleQuery(e) {
      this.loading = true
      //this.queryParams.warehouseType = 'tool'
      // this.queryParams.warehouseId = this.$route.params.id
      let index = 0
      if(e!=null){
        index = e.index
      }
      WarehouseApi.list({warehouseType : 'center'}).then(response => {
        console.log(response)
        this.tableData = response.data
        //this.page.total = response.data.total

        this.handleQuery1(this.tableData[index].id)
        this.loading = false
      }, () => {
        this.loading = false
      })

    },

    handleQuery1(id) {
      this.loading = true

      //this.queryParams.warehouseType = 'tool'
      this.queryParams.warehouseId = id
      WarehouseAreaApi.page(this.queryParams, this.page).then(response => {
        console.log(response)
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })

    },

    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    getTableData(id){
       if(id !=null){
         this.queryParams1.warehouseCode = id
       }

       TbWmsMaterialInLocationApi.page(this.queryParams1,this.page1).then(res =>{
          console.log(res)
          this.page1.records = res.data.records
          this.page1.total = res.data.total
       })
    },
    handleCancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .b-cont {
    position: relative;
    padding: 0 50px 20px 20px;
  }
  .b-cells {
    margin-top: 25px;
  }
  .locationList{
    padding-bottom:50px;
  }
  .b-cell {
    padding: 0 10px;
    overflow: hidden;
    .b-cell-b {
      width: auto;
      padding: 8px;
      .b-cell-name {
        width: 110px;
        margin-right: 10px;
        font-size: 13px;
        flex-shrink: 0;
        color: #777;
      }
      .b-cell-name2 {
        width: 100%;
        margin-right: 10px;
        font-size: 13px;
        flex-shrink: 0;
        color: #777;
      }
      .b-cell-value {
        font-size: 13px;
        color: #333;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      .b-cell-foot {
        flex-shrink: 0;
        display: block;
        width: 15px;
        height: 15px;
        margin-left: 8px;
      }
    }
  }

  .f-item {
    padding: 3px 0;
    height: 25px;
    .f-img {
      position: block;
      width: 15px;
      height: 15px;
      padding: 0 1px;
      margin-right: 8px;
    }
    .f-name {
      color: #666;
      font-size: 12px;
      margin-right: 10px;
    }
  }
</style>
